
<template>
  <el-breadcrumb separator="/" v-if="pages.length > 1">
    <el-breadcrumb-item :to="{ name: page.routeName }" v-for="page in pages" :key="page.routeName">{{ page.title
    }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script lang="ts" setup>
import { ElBreadcrumb, ElBreadcrumbItem } from "~element-plus"
import { useCommonStore } from '../stores/common';
import { findPrantPage, type PagePermType } from '../compostions/pagePerm';
import { useRoute } from 'vue-router';
import { computed, watch } from 'vue';
import { useKeepLiveStore } from '../stores/keepLive';
const route = useRoute()
const { sysPages } = useCommonStore()
const keepLiveStore = useKeepLiveStore()
const pages = computed<PagePermType[]>(() => findPrantPage(sysPages, route.name as string) || [])

watch(pages, () => {
  keepLiveStore.clearKeepLive("crumb")
  for (const page of pages.value) {
    keepLiveStore.addKeepAlive(page.routeName, "crumb")
  }
},
{
  immediate: true
})
</script>